<template>
  <div id="app">
    <div class="frame-header-block">
      <div class="frame-header">
        <div class="frame-title">Hello!外贸 (1.0.0)</div>
        <div class="frame-ctrl-group">
          <ctrl-btn-group></ctrl-btn-group>
        </div>
      </div>
    </div>
    <el-container id="appbody">
      <el-container v-if="hasLogined">
        <el-aside class="fixed-aside" style="width: 200px">
          <el-menu :default-openeds="openmenus" :default-active="'/'" @select="handleSelect">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-message"></i>仪表盘
              </template>
              <el-menu-item index="/">概览</el-menu-item>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>
                自媒体
              </template>
              <el-menu-item index="/all">概览</el-menu-item>
              <el-menu-item index="/spider">采集</el-menu-item>
              <el-menu-item index="/ai">生成</el-menu-item>
              <el-menu-item index="/media">发布</el-menu-item>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title"><i class="el-icon-message"></i>配置
              </template>
              <el-menu-item index="/dict">字典</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main class="main-content">
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-container v-else>
        <Login @handleLogin="handleLogin"></Login>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import { shell } from 'electron'
import { funcFns } from '@/puppeteer/utils/funtion'

import Login from './views/homePage/login'
import CtrlBtnGroup from './components/Common/CtrlBtnGroup'

export default {
  name: 'spider-ai-media',
  components: {
    Login,
    CtrlBtnGroup,
  },
  data() {
    return {
      openmenus: ['1'],
      hasLogined: false,
    }
  },
  mounted() {
    if (process.env.NODE_ENV !== 'development') {
      if (!funcFns.chromePath()) {
        this.showInstallInfo()
      }
    }
  },
  methods: {
    handleSelect(index, indexPath) {
      if (this.$route.path !== index) {
        this.$router.push(index)
      }
    },
    handleLogin(args) {
      console.log('args', args)
      this.hasLogined = args
    },
    showInstallInfo() {
      this.$confirm('请确定您已安装Chrome?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      }).then(() => {
      }).catch(() => {
        shell.openExternal('https://www.google.cn/chrome/')
      })
    },
  },
}
</script>

<style lang="scss">
@import './assets/black.scss';

body {
  padding: 0;
  margin: 0;
  font-family: 'PingFang SC', 'Lantinghei SC', 'Lucida Grande',
    '\5FAE\8F6F\96C5\9ED1', 'Microsoft YaHei', FreeSans, 'WenQuanYi Micro Hei',
    'Hiragino Sans GB', 'Hiragino Sans GB W3', SimSun, sans-serif, tahoma, arial;
  box-sizing: border-box;
  background: #fff;
  overflow: hidden;
  border-width: 1px;

  .frame-header-block {
    height: 40px;

    .frame-header {
      z-index: 6;
      position: fixed;
      top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 40px;
      background-color: #323232;
      -webkit-app-region: drag;
    }

    .frame-title,
    .tips {
      padding-left: 20px;
      font-size: 14px;
      color: #fff;
    }
  }

  .fixed-aside {
    position: fixed;
    top: 83;
    background-color: #f4f4f5;
    overflow-y: auto;
    z-index: 4;
    height: 100%;
  }

  .main-content {
    height: calc(100vh - 44px);
    overflow-y: auto;
    margin-left: 201px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 6px;
  }

  .el-menu {
    height: 100%;
  }

  .el-table {
    margin-top: 2px;
  }
}
</style>
